<div class="layui-layout layui-layout-admin">
    {{render "public/header.html"}}
    {{render "public/menu.html"}}
    <div class="layui-body layui-content">
        <!-- 内容主体区域 -->
        <div class="layui-breadcrumb">
            <a href="/">主页</a>
            <a href="/daemon/task/list?addr={{.addr}}">{{.addr}}</a>
            <a>
                <cite>日志</cite>
            </a>
        </div>
        <div class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="search" placeholder="搜索日志" class="layui-input search-txt">
                </div>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" id="search-date" class="layui-input" placeholder="选择日期">
                </div>
                <div class="layui-input-inline" style="width: 90px;">
                    <input type="checkbox" id="is-tail" title="顺序" name="isTail">
                </div>
                <div class="layui-btn" id="search">搜索</div>
            </div>
        </div>

        {{if .error}}
        <blockquote class="layui-elem-quote layui-text" style="color:#FF5722">
            错误:{{.error}}
        </blockquote>
        {{end}}

        <table class="layui-table" lay-size="sm">
            <colgroup>
                <col>
            </colgroup>
            <tbody id="log-list" total="{{.total}}" pagesize="{{.pagesize}}">
                {{range $k,$v := .logList}}
                <tr>
                    <td>{{$v}}</td>
                </tr>
                {{end}}
            </tbody>
        </table>
        <div id="log-page"></div>
    </div>
    {{render "public/footer.html"}}
</div>
<script src="/static/lib/layui/layui.js"></script>
<script>
    //config的设置是全局的
    layui.config({
        base: '/static/js/' //假设这是你存放拓展模块的根目录
    })
    layui.use(['common', 'element', 'jquery', 'layer', 'laydate', 'laypage', 'form'], function () {
        var common = layui.common;
        var layer = layui.layer;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var laypage = layui.laypage;
        var form = layui.form;

        //总页数大于页码总数
        laypage.render({
            elem: 'log-page',
            count: $("#log-list").attr("total"), //数据总数,
            limit: $("#log-list").attr("pagesize"), //每页显示的条数
            curr: common.getRequest().page ? common.getRequest().page : 1,
            jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    window.location.href = common.getRequest().add("page", obj.curr).search();
                }
            }
        });
        // 搜索默认值
        if (common.getRequest().pattern) {
            $('.search-txt').val(common.getRequest().pattern);
        }

        if (common.getRequest().date) {
            $('#search-date').val(common.getRequest().date);
        }

        if (common.getRequest().isTail === 'false') {
            form.val("searchForm", {
                'isTail': true
            })
        }

        // 监听搜索事件
        $('#search').on('click', function () {
            var searchText = $('.search-txt').val();
            var time = $('#search-date').val();
            var isTail = $("#is-tail").prop("checked");

            var urlObj = common.getRequest().add("pattern", searchText);
            urlObj.add("date", time);
            urlObj.add("page", 1);
            urlObj.add('isTail', isTail ? 'false' : 'true')
            window.location.href = urlObj.search();
        })

        if ($('#search-date').val() == "") {
            laydate.render({
                format: "yyyy/MM/dd",
                elem: '#search-date',
                value: new Date()
            });
        } else {
            laydate.render({
                format: "yyyy/MM/dd",
                elem: '#search-date'
            });
        }

        $('#flexible-icon').on('click', function () {
            if ($(this).hasClass('layui-icon-spread-left')) {
                $(this).addClass('layui-icon-shrink-right').removeClass('layui-icon-spread-left');
                $('.layui-layout-body').removeClass('min-layout');
            } else {
                $(this).addClass('layui-icon-spread-left').removeClass('layui-icon-shrink-right');
                $('.layui-layout-body').addClass('min-layout');
            }
        })

        if (window.innerWidth < 990) {
            $('.layui-layout-body').addClass('min-layout');
            $('#flexible-icon').addClass('layui-icon-spread-left').removeClass('layui-icon-shrink-right');
        }

        $(window).on('resize', function () {
            if (window.innerWidth < 990) {
                $('.layui-layout-body').addClass('min-layout');
                $('#flexible-icon').addClass('layui-icon-spread-left').removeClass(
                    'layui-icon-shrink-right');
            } else {
                $('.layui-layout-body').removeClass('min-layout');
                $('#flexible-icon').addClass('layui-icon-shrink-right').removeClass(
                    'layui-icon-spread-left');
            }
        })

    })
</script>